<template>
    <view class="tab-box">
        <view v-for="(i, index) in tabList" :key="index" class="tab-item" :class="{ 'active': url === i.pagePath }"
            @click="toNext(i)">
            <view>
                <image v-if="url !== i.pagePath" class="tab-icon" :src="i.iconPath" />
                <image v-if="url === i.pagePath" class="tab-icon" :src="i.selectedIconPath" />
            </view>
            <view class="text">
                {{ i.text }}
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import store from '@/store/index.js';

const props = defineProps({
    url: {
        type: String,
        default: ''
    }
})

const tabList = computed(() => {
    return store.state.tabBarList
})

const isToRankList = computed(() => {
    return store.state.toRankList
})

const toNext = (item) => {
    uni.switchTab({
        url: item.pagePath
    })
}

watch(isToRankList, (newval) => {
    if (newval) {
        uni.switchTab({
            url: '/pages/rankinglist/index'
        })
        store.commit('switchToRankList', false)
    }
}, {
    immediate: true,
    deep: true
})

</script>
<style lang="scss" scoped>
.tab-box {
    position: fixed;
    width: 100%;
    // padding: 20rpx 0;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    z-index: 10000000;
    border-top: 1rpx solid #eee;
    font-size: 24rpx;
    background: #fff;
}

.tab-icon {
    width: 36rpx;
    height: 36rpx;
    margin-bottom: 6rpx;
}

.tab-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.active {
    color: #3E5FF5;
}</style>